<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App',
  created() {
    // 当在任一路由页面被刷新时,即是根组件app被重新创建,此时可以进行webSocket重连
    // 从localStorage中获取用户信息,是登录状态则可以进行webSocket重连
    const token = this.$store.getters.token
    if (token) {
      this.$webSocket.init()
    }
  }
}
</script>

<style lang="scss">
/*公共样式 */
//列表页面
.list-container {
  padding: 15px;
  //左侧区域
  .aside {
    min-width: 180px;
    background-color: white;
  }
  //搜索区域
  .query {
    .form-item {
      width: 200px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
  }
  // 表格区域
  .table {
    margin-top: 10px;
  }
}

//带垂直滚动条的对话框
.dialog—with-scroll {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}

/*修复穿梭框放到form-item下列表项出现空白行问题*/
.el-checkbox.el-transfer-panel__item {
  display: block;
}
.el-dialog .el-dialog__body {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  /*统一设置高度为100%*/
  height: 100%;
}
/**
 *以下样式将单选框隐藏，并绝对定位与文字内容一样大小，这样点击时可以点击整行文字。
 */
.el-cascader-panel .el-radio {
  width: 132px;
  height: 34px;
  line-height: 34px;
  padding: 0 10px;
  z-index: 10;
  position: absolute;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
// el-card样式
.el-card {
  border-radius: 0;
  border: 1px solid #ddd;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  .el-card__header {
    font-size: 14px;
    padding: 9px 10px;
    color: #006eff;
    border-bottom: 1px solid #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
</style>

